<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 span {
            color: pink;
        }
        b {
            color: powderblue;
        }
        img {
            width: 100px;
        }
    </style>
    <script src="../../utils.js"></script>
</head>
<body>
    <button onclick="getWeather()">天气预报</button>
    <div>
        <!-- <h2>
            <span>中国</span>
            <span>四川</span>
            <span>成都</span>
        </h2>
        <p>
            今天天气：<b>晴</b>
            温度：<i>30℃</i>
            <img src="" alt="">
        </p> -->
    </div>
    <script>
        function getWeather () {
            utils.get('https://route.showapi.com/9-5', {
                showapi_appid: '73212',
                showapi_sign: '098f694bc7e047918fbe5950c489dead',
                from: '5',
                lng: '104.047659',
                lat: '30.636846',
                needMoreDay: 1
            }, resp => {
                console.log(resp)
                var data = resp.showapi_res_body
                var str = `
                <h2>
                    <span>${data.cityInfo.c9}</span>
                    <span>${data.cityInfo.c7}</span>
                    <span>${data.cityInfo.c5}</span>
                </h2>
                <p>
                    今天天气：<b>${data.now.weather}</b>
                    温度：<i>${data.now.temperature}℃</i>
                    <img src="${data.now.weather_pic}" alt="">
                </p>
                `
                // -- 继续拼接f2明天f3后天的天气 --
                document.querySelector('div').innerHTML = str
            })
        }
    </script>
</body>
</html>